<template>
	<div class="wrapper">
		<!-- header部分 -->
		<header>
			<i class="fa fa-angle-left" @click="back"></i>
			<p>登录</p>
		</header>

		<!-- 登录类型选择 -->
		<div class="login-type">
			<button @click="toggleLoginType('user')" :class="{ active: loginType === 'user' }">用户登录</button>
			<button @click="toggleLoginType('business')" :class="{ active: loginType === 'business' }">商家登录</button>
		</div>

		<!-- 表单部分 -->
		<ul class="form-box" v-if="loginType === 'user'">
			<li>
				<div class="title">
					手机号码：
				</div>
				<div class="content">
					<input type="text" v-model="userId" placeholder="手机号码">
				</div>
			</li>
			<li v-show="numNull" style="color: red;font-size: 3vw;">
				手机号码不能为空！
			</li>
			<li v-show="numError" style="color: red;font-size: 3vw;">
				手机号码不合规！
			</li>
			<li>
				<div class="title">
					密码：
				</div>
				<div class="content">
					<input type="password" v-model="password" placeholder="密码">
				</div>
			</li>
			<li v-show="passNull" style="color: red;font-size: 3vw;">
				密码不能为空！
			</li>
		</ul>

		<ul class="form-box" v-if="loginType === 'business'">
			<li>
				<div class="title">
					商家ID：
				</div>
				<div class="content">
					<input type="text" v-model="businessId" placeholder="商家ID">
				</div>
			</li>
			<li v-show="businessIdNull" style="color: red;font-size: 3vw;">
				商家ID不能为空！
			</li>
			<li v-show="businessIdError" style="color: red;font-size: 3vw;">
				商家ID不合规！
			</li>
			<li>
				<div class="title">
					密码：
				</div>
				<div class="content">
					<input type="password" v-model="businessPassword" placeholder="密码">
				</div>
			</li>
			<li v-show="businessPassNull" style="color: red;font-size: 3vw;">
				密码不能为空！
			</li>
		</ul>

		<div class="button-login">
			<button @click="login">{{ loginType === 'user' ? '用户登陆' : '商家登陆' }}</button>
		</div>
		<div class="button-register">
			<button @click="register">去注册</button>
		</div>

		<Footer></Footer>
	</div>
</template>

<script>
import Footer from '../components/Footer.vue';

export default {
	name: 'Login',
	data() {
		return {
			userId: '',
			password: '',
			numNull: false,
			numError: false,
			passNull: false,
			businessId: '',
			businessPassword: '',
			businessIdNull: false,
			businessIdError: false,
			businessPassNull: false,
			businessLoggedIn: false,
			loginType: 'user' // 默认为用户登录
		}
	},
	methods: {
	    back() {
	        this.$router.go(-1);
	    },
	    toggleLoginType(type) {
	        this.loginType = type;
	    },
	    login() {
	        if (this.loginType === 'user') {
				this.business = this.$getSessionStorage('business');
				if(this.business!=null){
					alert('请退出商家登录再进行用户登录！');
					this.$router.push({
						path: '/mine' ,
					});
					return;
				}
	            if (this.userId === '') {
	                this.numNull = true;
	                setTimeout(() => {
	                    this.numNull = false;
	                }, 2000);
	                return;
	            }
	            if (this.password === '') {
	                this.passNull = true;
	                setTimeout(() => {
	                    this.passNull = false;
	                }, 2000);
	                return;
	            } else {
	                const userIdString = this.userId.toString();
	                if (userIdString.length === 11 && !isNaN(userIdString) && userIdString.startsWith('1')) {
	                    // 数字以1开头，有11位，且全为数字
	                    this.checkUserExists(this.userId);
	                } else {
	                    this.numError = true;
	                    setTimeout(() => {
	                        this.numError = false;
	                    }, 2000);
	                    return;
	                }
	            }
	        } else if (this.loginType === 'business') {
	            if (this.businessId === '') {
	                this.businessIdNull = true;
	                setTimeout(() => {
	                    this.businessIdNull = false;
	                }, 2000);
	                return;
	            }
	            if (this.businessPassword === '') {
	                this.businessPassNull = true;
	                setTimeout(() => {
	                    this.businessPassNull = false;
	                }, 2000);
	                return;
	            } else {
	                const businessIdString = this.businessId.toString();
	                if (businessIdString.length >= 5 && !isNaN(businessIdString)) {
	                    // 商家ID至少5位，且全为数字
	                    this.checkBusinessExists(this.businessId);
	                } else {
	                    this.businessIdError = true;
	                    setTimeout(() => {
	                        this.businessIdError = false;
	                    }, 2000);
	                    return;
	                }
	            }
	        }
	    },
	    checkUserExists(userId) {
			let url =`UserController/getUserById/${this.userId}`;
	        this.$axios.get(url).then(response => {
	            let user = response.data.result;
	            if (user == 0) {
	                alert('用户不存在，请先注册！');
	            } else {
	                this.authenticateUser(userId, this.password);
	            }
	        }).catch(error => {
	            console.error(error);
	            alert('检查用户存在时发生错误');
	        });
	    },
	    authenticateUser(userId, password) {
			let url =`UserController/getUserByIdByPass/${this.userId}/${this.password}`;
	        this.$axios.get(url).then(response => {
				 //console.log(response.data);
	            let user = response.data.result;
	            if (user == null||user.userName==null) {
	                alert('用户名或密码不正确！');
	            } else {
					//console.log(response.data);
	                this.$setSessionStorage('user', user);
	                this.$router.push('/mine');
	            }
	        }).catch(error => {
	            console.error(error);
	        });
	    },
	    checkBusinessExists(businessId) {
			let url =`BusinessAdminController/getById/${this.businessId}`;
	        this.$axios.get(url).then(response => {
	            let business = response.data.result;
	            if (business == 0) {
	                alert('商家不存在，请先注册！');
	            } else {
	                this.authenticateBusiness(businessId, this.businessPassword);
	            }
	        }).catch(error => {
	            console.error(error);
	            alert('检查商家存在时发生错误');
	        });
	    },
	    authenticateBusiness(businessId, password) {
			let url =`BusinessAdminController/getBusinessByIdByPass/${this.businessId}/${this.businessPassword}`;
	        this.$axios.get(url).then(response => {

	            let business = response.data.result;
	            if (business == null||business.businessName==null) {
	                alert('商家ID或密码不正确！');
	            } else {

	                this.businessLoggedIn = true; // 设置商家已登录标志
	                this.$setSessionStorage('business', business);

	                this.$router.push('/Mine');
	            }
	        }).catch(error => {
	            console.error(error);
	        });
	    },
	    register() {
	        this.$router.push({
	            path: 'register'
	        });
	    },
	    $setSessionStorage(key, value) {
	        // 假设这里有一个设置sessionStorage的方法
	        sessionStorage.setItem(key, JSON.stringify(value));
	    }
	},
	components: {
		Footer
	}
}
</script>

<style scoped>
.wrapper {
	width: 100%;
	height: 100%;
}

/****************** header部分 ******************/
.wrapper header {
	width: 100%;
	height: 12vw;
	background-color: #01B0F2;
	font-size: 4.8vw;
	color: #fff;

	z-index: 10;

	display: flex;
	justify-content: flex-start;
	align-items: center;

	position: fixed;
	left: 0;
	top: 0;
}

.wrapper header i {
	margin: 0vw 0vw 0vw 3vw;
	font-size: 6vw;
	user-select: none;
	cursor: pointer;
}

.wrapper header p {
	margin: 0vw 0vw 0vw 33.5vw;
}

/****************** 登录类型选择 ******************/
.login-type {
	width: 100%;
	box-sizing: border-box;
	padding: 4vw 3vw;
	display: flex;
	justify-content: space-around;

	position: fixed;   /* 固定定位 */
	bottom: 0;         /* 贴底部 */
	left: 0;           /* 左对齐 */
	background-color: #fff; /* 可选：防止背景透明 */
	z-index: 1000;     /* 保证浮在前面 */
}

.login-type button {
	width: 45%;
	height: 10vw;
	font-size: 3.8vw;
	font-weight: 700;
	color: #fff;
	background-color: #DDD;
	border-radius: 50%;
	border: none;
	outline: none;
}

.login-type button.active {
	background-color: #01B0F2;
}

.login-type button:hover {
	background-color: #666; /* 修复了错误注释位置 */
}


/****************** 表单部分 ******************/
.wrapper .form-box {
	width: 100%;
	margin-top: 12vw;
}

.wrapper .form-box li {
	box-sizing: border-box;
	padding: 4vw 3vw 0 3vw;
	display: flex;
	align-items: center;
}

.wrapper .form-box li .title {
	flex: 0 0 18vw;
	font-size: 3vw;
	font-weight: 700;
	color: #666;
}

.wrapper .form-box li .content {
	flex: 1;
}

.wrapper .form-box li .content input {
	border: none;
	outline: none;
	width: 100%;
	height: 4vw;
	font-size: 3vw;
}

/****************** 登录按钮部分 ******************/
.wrapper .button-login {
	width: 100%;
	box-sizing: border-box;
	padding: 4vw 3vw 0 3vw;
}

.wrapper .button-login button {
	width: 100%;
	height: 10vw;
	font-size: 3.8vw;
	font-weight: 700;
	color: #fff;
	background-color: #38CA73;
	border-radius: 4px;
	border: none;
	outline: none;
}

/****************** 注册按钮部分 ******************/
.wrapper .button-register {
	width: 100%;
	box-sizing: border-box;
	padding: 4vw 3vw 0 3vw;
}

.wrapper .button-register button {
	width: 100%;
	height: 10vw;
	font-size: 3.8vw;
	font-weight: 700;
	color: #666;
	background-color: #EEE;
	border: solid 1px #DDD;
	border-radius: 4px;
	border: none;
	outline: none;
}
</style>